<template>
  <div>
    <a-layout>
      <a-layout>
        <a-layout style="padding: 0 24px 24px">
          <div class="list1">
            <span class="span1">账号列表</span>
            <input type="button" value="新增" class="input1" @click="addzh" />
          </div>
          <div class="list2">
            <span class="span2">搜索</span><input type="text" placeholder="请输入用户账号、关联员工、联系手机" class="input2" />
            <span class="span2">所属项目</span>
            <el-select v-model="tabaleprogram.program" placeholder="---请选择---" class="input4" clearable>
              <el-option v-for="item in iprogram" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <span class="span2">所属承建商</span>
            <el-select v-model="tabaleprogram.shang" placeholder="---请选择---" class="input4" clearable>
              <el-option v-for="item in ishang" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <span class="span2">状态</span>
            <el-select v-model="tabaleprogram.status" placeholder="---请选择---" class="input4" clearable>
              <el-option v-for="item in istatus" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
            <input type="button" value="搜索" class="input3" @click="searchnature" />
          </div>
          <el-table :data="tableData.slice((page - 1) * limit, page * limit)" border style="width: 100%">
            <el-table-column fixed type="index" label="序号" width="60" header-align="center" align="center">
              <template #default="scope">
                <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="admin" label="用户账号" width="100">
            </el-table-column>
            <el-table-column prop="renyuan" label="关联人员" width="100">
            </el-table-column>
            <el-table-column prop="phone" label="联系手机" width="120">
            </el-table-column>
            <el-table-column prop="program" label="所属项目" width="140">
            </el-table-column>
            <el-table-column prop="shang" label="所属承建商" width="140">
            </el-table-column>
            <el-table-column prop="class" label="所属班组" width="140">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <span>{{ scope.row.status == 1 ? "启用" : "禁用" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="caozuo" label="操作" width="280">
              <template #default="scope">
                <el-button size="mini" @click="resetpass">密码重置</el-button>
                <el-button size="mini" @click="forbidden(scope.row.status, scope.row.id)">
                  {{ scope.row.status == 1 ? "禁用" : "启用" }}
                </el-button>
                <el-button size="mini" @click="editzh(scope.row.id)" :disabled="scope.row.status == 2">编辑</el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="list3">
            <!--分页组件-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
              :page-sizes="[4, 8, 12]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
  <zhpassword v-show="isShowreset" @hide="hideFn" @updatesuccess="successFn"></zhpassword>
  <zhedit v-show="isShowedit" @hideen="hideFn2" @updatesuccessen="successFn2" :id="editid"></zhedit>
  <zhadd v-show="isShowadd" @hideen="hideFn3" @updatesuccessen="successFn3"></zhadd>
  <zhforbidden v-show="isforbidden" @hide="hideFn1" @updatesuccess="successFn1" :id="dd" :status="cc"></zhforbidden>
  <zhonon v-show="isonon" @hide="hideFn4" @updatesuccess="successFn4" :id="bb" :status="aa"></zhonon>
</template>
<script setup lang="ts">

import { reactive, ref } from "vue";
import zhpassword from "./zhpassword.vue";
import zhedit from "./zhedit.vue";
import zhadd from "./zhadd.vue";
import zhforbidden from "./zhforbidden.vue";
import zhonon from "./zhonon.vue";
import service from "../../../utils/service";

const page = ref(1)
const limit = ref(4)
const total = ref(0);
// 三个下拉菜单选项
const tabaleprogram = reactive<{
  program?: string;
  status?: string;
  shang?: string;
}>({

});
const iprogram = reactive(["---请选择---", "XXXX项目1", "XXXX项目2", "XXXX项目3", "XXXX项目4"])
const ishang = reactive(["---请选择---", "中建八局", "中局二建"])
const istatus = reactive(["---请选择---", "启用", "禁用"])
interface itabledata {
  "id": string;
  "admin": string;
  "renyuan": string;
  "phone": string;
  "program": string;
  "shang": string;
  "class": string;
  "status": string;
}
const tableData = reactive<itabledata[]>([]);
const admin = reactive<{
  id?: string,
  admin?: string,
  renyuan?: string,
  phone?: string,
  program?: string,
  shang?: string,
  class?: string,
  status?: string,
}>({});
const gettableData = () => {
  service({
    url: "/adminlist",
  }).then((res) => {
    tableData.length = 0
    tableData.push(...res.data);
    total.value = res.data.length;
  });
};
gettableData();

// 分页
const handleSizeChange = (val: any) => {
  limit.value = val
}
const handleCurrentChange = (val: any) => {
  page.value = val
}
// 密码重置
const isShowreset = ref(false);
const resetpass = () => {
  isShowreset.value = true;
  service({
    url: "/adminlist",
  }).then((res) => {

  });
};
const hideFn = () => {
  isShowreset.value = false;
};
const successFn = () => gettableData();
// 编辑
const isShowedit = ref(false);
const editid = ref("")
const editzh = (id: string) => {
  isShowedit.value = true;
  editid.value = id
};
const hideFn2 = () => {
  isShowedit.value = false;
};
const successFn2 = () => gettableData();
// 增加
const isShowadd = ref(false);
const addzh = () => {
  isShowadd.value = true;
};
const hideFn3 = () => {
  isShowadd.value = false;
};
const successFn3 = () => gettableData();
// 禁用/启用
const isforbidden = ref(false);
let aa = ref()
let bb = ref()
let cc = ref()
let dd = ref()
const forbidden = (status: any, id: any) => {
  const state = admin.status ? 1 : 2
  // 发送请求更改数据
  service({
    url: "/adminlist",
  }).then((res) => {
    console.log(res);
    res.data.status = state

  });
  // 重新渲染数据
  gettableData()
  if (status == "2") {
    isonon.value = true;
    aa = status
    bb = id

  }
  if (status == "1") {
    isforbidden.value = true;
    cc = status
    dd = id
    console.log(cc);

  }
};
const hideFn1 = () => {
  isforbidden.value = false;
};
const successFn1 = () => gettableData();

// 启用
const isonon = ref(false);
const hideFn4 = () => {
  isonon.value = false;
};

const successFn4 = () => gettableData();
// 点击搜索查看
const searchnature = () => {
  service({
    url: "/adminlist",
    method: "get",
    params: tabaleprogram
  }).then((res) => {
    console.log(res);
    tableData.length = 0;
    tableData.push(...res.data);
    admin.status = null
    admin.program = null
    admin.shang = null

  });

} 
</script>
<style scoped>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}

p {
  color: #666;
}

.list1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.list2 {
  margin-top: 10px;
}

.input1 {
  width: 72px;
  height: 30px;
  background: inherit;
  background-color: #FF9900;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #FF9900;
  border-radius: 5px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "PingFangSC-Regular", "PingFang SC";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #FFF;
}

.span1 {
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #666;
}

.span2 {
  font-size: 12px;
  color: #666;
  margin-left: 10px;
}

.input2 {
  width: 232px;
  height: 27px;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  text-align: center;
  margin-left: 30px;
  border: 1px solid #999;
}

.input3 {
  width: 71px;
  height: 35px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(26, 188, 156, 1);
  border-radius: 5px;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #ffffff;
  margin-left: 15px;
}

.input4 {
  width: 177px;
  height: 35px;
  background-color: rgba(255, 255, 255, 0);
  /* box-sizing: border-box; */
  border: 1px solid #999;
  border-radius: 3px;
  margin-left: 10px;
}

.el-table--fit {
  margin-top: 10px;
}

.cell {
  font-size: 12px;
  color: #666;
  font-weight: 600;
  text-align: center;
}

.span3 {
  width: 40px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background: #999999;
  border-radius: 5px;
  text-align: center;
}

.span4 {
  width: 60px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.988235294117647);
  background-color: rgba(153, 153, 153, 1);
  border-radius: 5px;
}

.span5 {
  width: 114px;
  height: 20px;
  font-size: 12px;
  color: rgb(102, 102, 102);
  margin-left: 10px;
}

.list3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 15px;
}
</style>
